<template>
  <div class="obody">
    <div class="progress-container">
      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
    </div>
    <div class="step-info">STEP 2/7</div>
    <p>邮箱验证</p>
    <p>请填写邮箱收到的4位数字验证码</p>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 假设当前进度为1/7，用于演示
const currentStep = ref(2)
const totalSteps = 7
const progress = (currentStep.value / totalSteps) * 100
</script>
<style scoped>
.obody {
  padding: 30px;
}
.progress-container {
  width: 100%;
  height: 4px; /* 进度条高度 */
  background-color: #e0e0e0; /* 背景颜色 */
  margin: 10px 0 40px; /* 外边距 */
}

.progress-bar {
  height: 100%;
  background-color: #6c5dd3; /* 进度条颜色 */
  transition: width 0.3s ease; /* 动画效果 */
}

.step-info {
  font-size: 12px;
  color: #6c5dd3;
}
p:nth-of-type(1) {
  font-size: 25px;
  margin: 10px 0 0px;
}
p:nth-of-type(2) {
  font-size: 14px;
  color: #666;
}
</style>
